'use client'

import { useState } from 'react'
import { 
  Box, 
  HStack, 
  Text, 
  IconButton, 
  Avatar,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  useColorModeValue,
  Tooltip
} from '@chakra-ui/react'
import { 
  FiUser, 
  FiMoreVertical, 
  FiEdit2, 
  FiTrash2, 
  FiCopy 
} from 'react-icons/fi'
import { DraggableItem } from '../drag-drop/DraggableItem'
import { CharacterDragItem, DragItem } from '@/types/drag-drop'

export interface Character {
  id: string;
  name: string;
  description?: string;
  traits?: Array<{name: string; value: string}>;
  background?: string;
  avatar?: string;
}

interface CharacterListItemProps {
  character: Character;
  isActive?: boolean;
  onClick?: (character: Character) => void;
  onEdit?: (character: Character) => void;
  onDelete?: (character: Character) => void;
  onDuplicate?: (character: Character) => void;
  onDragStart?: (character: Character) => void;
  onDragEnd?: (character: Character, dropped: boolean) => void;
}

export const CharacterListItem = ({ 
  character,
  isActive = false,
  onClick,
  onEdit,
  onDelete,
  onDuplicate,
  onDragStart,
  onDragEnd
}: CharacterListItemProps) => {
  const [isHovered, setIsHovered] = useState(false)
  
  const bgColor = useColorModeValue('white', 'gray.800')
  const activeBgColor = useColorModeValue('purple.50', 'purple.900')
  const hoverBgColor = useColorModeValue('gray.50', 'gray.700')
  
  // 将角色转换为可拖拽项
  const dragItem: CharacterDragItem = {
    id: character.id,
    type: 'character',
    name: character.name,
    data: {
      name: character.name,
      description: character.description,
      traits: character.traits,
      background: character.background,
      avatar: character.avatar
    }
  }
  
  const handleDragStart = () => {
    if (onDragStart) {
      onDragStart(character)
    }
  }
  
  const handleDragEnd = (item: DragItem, dropped: boolean) => {
    if (onDragEnd) {
      onDragEnd(character, dropped)
    }
  }
  
  const handleClick = () => {
    if (onClick) {
      onClick(character)
    }
  }
  
  return (
    <DraggableItem 
      item={dragItem}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      <Box
        p={2}
        borderRadius="md"
        bg={isActive ? activeBgColor : bgColor}
        _hover={{ bg: hoverBgColor }}
        cursor="pointer"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onClick={handleClick}
        data-testid={`character-item-${character.id}`}
      >
        <HStack justify="space-between">
          <HStack spacing={2}>
            {character.avatar ? (
              <Avatar size="xs" src={character.avatar} name={character.name} />
            ) : (
              <FiUser />
            )}
            <Tooltip label={character.name} placement="top" openDelay={500}>
              <Text isTruncated maxW="180px">{character.name}</Text>
            </Tooltip>
          </HStack>
          
          {(isHovered || isActive) && (
            <Menu>
              <MenuButton
                as={IconButton}
                icon={<FiMoreVertical />}
                variant="ghost"
                size="sm"
                aria-label="More options"
                onClick={(e) => e.stopPropagation()}
              />
              <MenuList>
                {onEdit && (
                  <MenuItem 
                    icon={<FiEdit2 />} 
                    onClick={(e) => {
                      e.stopPropagation()
                      onEdit(character)
                    }}
                  >
                    编辑
                  </MenuItem>
                )}
                {onDuplicate && (
                  <MenuItem 
                    icon={<FiCopy />} 
                    onClick={(e) => {
                      e.stopPropagation()
                      onDuplicate(character)
                    }}
                  >
                    复制
                  </MenuItem>
                )}
                {onDelete && (
                  <MenuItem 
                    icon={<FiTrash2 />} 
                    color="red.500"
                    onClick={(e) => {
                      e.stopPropagation()
                      onDelete(character)
                    }}
                  >
                    删除
                  </MenuItem>
                )}
              </MenuList>
            </Menu>
          )}
        </HStack>
      </Box>
    </DraggableItem>
  )
}
